<template>
  <div class="f ac mb10 mr10">
    <div v-if="item.label" class="g3 fs14 nowrap">{{item.label}}：</div>
    <div class="tl">
      <el-select v-model="item.value" placeholder="请选择" style="width: 200px" @change="changeVal">
        <el-option v-for="opt in item.options" :key="opt._id" :label="opt.name" :value="opt.value" />
      </el-select> 
    </div>
  </div>
</template>
<script setup>
  import { ref, watchEffect } from "vue"
  /*************************************** */
  /**************data********************* */
  /*************************************** */
  const props = defineProps({
    item: { type: Object,default: () => ({}) },
    searchList: { type: Array, default: () => [] },
  })
  const emit = defineEmits(['setSearchList', 'changeSearch'])
  /*************************************** */
  /**************function***************** */
  /*************************************** */
  // 调整
  const changeVal = function (e) {
    if(!e) {return }
    let value = _.isString(e) || _.isNumber(e) ? e : e.target.value
    const searchList = _.searchCover(props.searchList, {id: props.item.id}, v => ({...v, value}))
    emit('setSearchList', searchList)
    const getParams = searchList.reduce((prev, item) => (prev[item.key] = item.value, prev), {})
    emit('changeSearch', {page: 1, ...getParams })
  }
</script>
<style scoped></style>